<template>
  <div class="repair">
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">物业报修</span>
      <span class="header-wrap-right"></span>
    </div>
    <div class="repair-box">
      <ul class="repair-list">
        <li class="repair-img-list" @click="tonewRepair">
          <div class="repair-img"></div>
          <div class="repair-text">
            <div class="repair-name">新增报修</div>
          </div>
        </li>
        <li class="repair-img-list" v-for="(list,index) in listData" :key="index" @click="torepairDetail(list.id)">
          <div class="repair-img">
            <!-- <img src="../../assets/images/6.jpg" alt=""> -->
          </div>
          <div class="repair-text">
            <div class="repair-name">{{list.repair_title}}</div>
          </div>
        </li>
        <li class="repair-img-list" @click="torepairList">
          <div class="repair-img"></div>
          <div class="repair-text">
            <div class="repair-name">历史报修</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { NavBar } from 'vant';
import api from '../../api/api.js'
export default {
  data(){
    return{
      listData:[],
    }
  },
  created(){
    this.getList()
  },
  methods:{
    goback(){
      this.$router.go(-1)
      // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
    },
    tonewRepair(){
      this.$router.push('/newRepair')
    },
    torepairList(){
      this.$router.push('/repairList')
    },
    torepairDetail(id){
      this.$router.push({
        path: '/repairDetail',
        query: {
          id
        }
      })
    },
    getList(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.increaselist,{
        params: {
          pageNumber: 1,
          pageSize: 2,
        }
      })
      .then((response) => {
        if(response.status==200){
          this.listData = response.data.data.list
          this.$toast.clear();
        }
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error);
      });
    }
  },
  components: {
    [NavBar.name]:NavBar,
  }
}
</script>
<style scoped>
.repair-list{
  padding-top: 1.4rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.repair-list li{
  position: relative;
  flex: 1;
  height: 4rem;
  min-width: 40%;
  max-width: 40%;
  margin-bottom: .5rem;
}
.repair-list li:nth-child(odd){
  margin-left:7%;
  background-size: cover;
}
.repair-list li:nth-child(even){
  margin-left:6%;
  background-size: cover;
}
.repair-img-list{
  border-radius: .2rem;
  background-size: contain;
}
.repair-img-list:nth-of-type(1){
  background: url('../../assets/images/4.jpg')
}
.repair-img-list:nth-of-type(2){
  background: url('../../assets/images/8.jpg')
}
.repair-img-list:nth-of-type(3){
  background: url('../../assets/images/8.jpg')
}
.repair-img-list:nth-of-type(4){
  background: url('../../assets/images/7.jpg')
}
.repair-list li .repair-img img{
  width: 100%;
  height: 100%;
  border-radius: .2rem;
}
.repair-text{
  font-size: .36rem;
  position: absolute;
  left: 12%;
  top: 8%;
}
.repair-name{
  width: 2rem;
  height: .8rem;
  line-height: .4rem;
  font-size: .32rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.repair-city{
  height: auto;
  font-size: .24rem;
  color: #57c5c6;
  text-indent: .15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
</style>


